<template>
  <div class="form-tenant-name">
    <div
      class="item_input"
      @click="showSelect()"
      :class="[
        tenantName.length > 0 ? '' : 'placeholder',
        { item_input_dis: disabled }
      ]"
    >
      <a-icon class="icon" v-if="selectIndex" type="up" />
      <a-icon class="icon" v-else type="down" />
      <span class="item_span" v-for="(item, index) in tenantName" :key="index">
        {{ item.label }}
        <!-- <i class="close"></i> -->
      </span>
    </div>
    <div class="item_input_select" v-show="selectIndex">
      <a-tabs
        :class="{ 'ant-item_tabs': isModal }"
        type="card"
        @change="callback"
        style="margin-top:5px"
      >
        <a-tab-pane
          :key="checkedData[0].type"
          v-if="checkedData[0].show"
          :tab="checkedData[0].tabLabel"
        >
          <keep-alive>
            <CheckBox
              :type="checkedData[0].type"
              :checkedList="checkedList1"
              :plainOptions="plainOptions1"
              @setCheckedKeys="getChecked"
            />
          </keep-alive>
        </a-tab-pane>
        <a-tab-pane
          :key="checkedData[1].type"
          v-if="checkedData[1].show"
          :tab="checkedData[1].tabLabel"
        >
          <keep-alive>
            <TreeBox
              :type="checkedData[1].type"
              :checkedList="checkedList2"
              :plainOptions="plainOptions2"
              :dataAllKeys="dataAllKeys1"
              @setCheckedKeys="getChecked"
            />
          </keep-alive>
        </a-tab-pane>
        <a-tab-pane
          :key="checkedData[2].type"
          v-if="checkedData[2].show"
          :tab="checkedData[2].tabLabel"
        >
          <keep-alive>
            <CheckBox
              :type="checkedData[2].type"
              :checkedList="checkedList3"
              :plainOptions="plainOptions3"
              @setCheckedKeys="getChecked"
            />
          </keep-alive>
        </a-tab-pane>
        <a-tab-pane
          :key="checkedData[3].type"
          v-if="checkedData[3].show"
          :tab="checkedData[3].tabLabel"
        >
          <keep-alive>
            <CheckBox
              :type="checkedData[3].type"
              :checkedList="checkedList4"
              :plainOptions="plainOptions4"
              @setCheckedKeys="getChecked"
            />
          </keep-alive>
        </a-tab-pane>
        <a-tab-pane
          :key="checkedData[4].type"
          v-if="checkedData[4].show"
          :tab="checkedData[4].tabLabel"
        >
          <keep-alive>
            <CheckBox
              :type="checkedData[4].type"
              :checkedList="checkedList5"
              :plainOptions="plainOptions5"
              @setCheckedKeys="getChecked"
            />
          </keep-alive>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { getUser } from "@/utils/token";
import TreeBox from "./TreeBox";
import CheckBox from "./CheckBox";
import vueEvent from "@/utils/vueEvent";
import { getListByBelongManger } from "@/api/SysPersonnel";
export default {
  components: { TreeBox, CheckBox },
  props: {
    // 是否为弹窗展示
    isModal: {
      type: Boolean,
      default: false,
      required: false
    },
    // 是否为禁止
    disabled: {
      type: Boolean,
      default: false,
      required: false
    },
    checkedDataType: {
      type: Array,
      default: () => [1, 2, 3, 4],
      required: false
    }
  },
  watch: {
    checkedDataType: {
      handler(newData, oldData) {
        this.checkedDataTypeHanle(newData);
      },
      immediate: true
    }
  },
  data() {
    return {
      selectIndex: false,
      checkedList1: [],
      checkedList2: [],
      checkedList3: [],
      checkedList4: [],
      checkedList5: [],
      plainOptions1: [],
      plainOptions2: [],
      plainOptions3: [],
      plainOptions4: [],
      plainOptions5: [],
      dataAllKeys1: [],
      tenantName: [],
      checkedData: [
        { type: 1, tabLabel: "用户", show: true },
        { type: 2, tabLabel: "部门", show: true },
        { type: 3, tabLabel: "用户组", show: true },
        { type: 4, tabLabel: "角色", show: true },
        { type: 5, tabLabel: "社戒社康人员", show: false }
      ]
    };
  },
  created() {
    this.tenantName = [];
    this.sysGetUserList();
    this.sysGetTree();
    this.sysUserPage();
    this.sysRoleGroupList();
    this.byBelongManger();
  },
  methods: {
    ...mapActions({
      OnGetUserList: "SysUser/OnGetUserList",
      getTree: "SysDepartment/getTree",
      getPage: "SysUserGroupController/getPage",
      onIsOutRoleGroupList: "SysRoleController/onIsOutRoleGroupList"
    }),
    //获取用户列表 1
    async sysGetUserList() {
      let res = await this.OnGetUserList();
      if (res) {
        this.plainOptions1 = res;
        this.plainOptions1.forEach(item => {
          item.value = item.userId;
          item.label = item.name;
        });
      }
    },
    //获取部门列表 2
    async sysGetTree() {
      let res = await this.getTree();
      if (res) {
        this.plainOptions2 = res;
        this.dataAllKeys1 = [];
        this.setName1(this.plainOptions2);
      }
    },
    //获取用户组列表 3
    async sysUserPage() {
      let form = {
        searchType: 0,
        keyWord: "",
        status: "",
        currentPage: 1,
        pageSize: 100
      };
      let res = await this.getPage(form);
      if (res) {
        this.plainOptions3 = res.records;
        this.plainOptions3.forEach(item => {
          item.value = item.id;
          item.label = item.groupName;
        });
      }
    },
    //获取角色列表 4
    async sysRoleGroupList() {
      let res = await this.onIsOutRoleGroupList();
      if (res) {
        let data = res;
        data.forEach(obj => {
          if (obj.roleInfoVOList && obj.roleInfoVOList.length > 0) {
            obj.roleInfoVOList.forEach(item => {
              item.value = item.id;
              item.label = item.roleName;
            });
            this.plainOptions4 = this.plainOptions4.concat(obj.roleInfoVOList);
          }
        });
      }
    },
    //获取社戒社康列表 5
    async byBelongManger() {
      let obj = {};
      //专管员传所属专管员id
      if (!getUser().isZFW) {
        obj = {
          belongManagerId: getUser().userId
        };
      }
      let res = await getListByBelongManger(obj);
      if (res) {
        this.plainOptions5 = res;
        this.plainOptions5.forEach(item => {
          item.value = item.id;
          item.label = item.realName;
        });
      }
    },
    mapCheckedData(data) {
      let RangeInfoData = [],
        InfoData = [];
      RangeInfoData = this.checkedData;
      for (let index in RangeInfoData) {
        if (data.type === RangeInfoData[index].type) {
          RangeInfoData[index].type = data.type;
          RangeInfoData[index].data = data.data;
          RangeInfoData[index].dataOptions = data.dataOptions
            ? data.dataOptions
            : [];
        }
      }

      InfoData = RangeInfoData.map(item => {
        if (item.data && item.data.length > 0) {
          return {
            data: item.data,
            type: item.type
          };
        }
      }).filter(obj => obj !== undefined);
      this.mapCheckedName(RangeInfoData);
      return InfoData;
    },
    mapCheckedName(RangeInfoData) {
      let RangeData = [];
      for (let index in RangeInfoData) {
        if (RangeInfoData[index].dataOptions) {
          RangeData = RangeData.concat(RangeInfoData[index].dataOptions);
        }
      }
      this.tenantName = RangeData;
    },
    setName1(datas) {
      //遍历树  获取数组
      for (let i in datas) {
        this.dataAllKeys1.push({
          label: datas[i].title,
          type: datas[i].type,
          value: datas[i].value,
          key: datas[i].key
        });
        if (datas[i].children) {
          this.setName1(datas[i].children);
        }
      }
    },
    getChecked(data) {
      this.$emit("getRangeInfo", this.mapCheckedData(data));
    },
    showSelect() {
      if (this.disabled) return;
      this.selectIndex = !this.selectIndex;
    },
    callback(key) {
      // console.log(key);
    },
    checkedDataTypeHanle(value) {
      this.checkedData.forEach(item => {
        if (value.indexOf(item.type) > -1) {
          item.show = true;
        } else {
          item.show = false;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.ant-checkbox-group {
  display: flex;
  flex-flow: column;
  margin-left: 14px;
  & > * {
    // margin-top: 10px;
    border-bottom: 1px #e9e9e9 solid;
    padding: 5px 0;
  }
}
.ant-item_tabs {
  /deep/.ant-tabs-tabpane-active {
    max-height: 240px;
    overflow-x: auto;
  }
}
/deep/.ant-tabs-tabpane-active {
  max-height: 140px;
  overflow-x: auto;
}
.form-tenant-name {
  .item_input {
    border: 1px #ccc solid;
    height: 34px;
    line-height: 34px;
    border-radius: 4px;
    position: relative;
    padding-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    &.item_input_dis {
      background-color: #f5f5f5;
    }
    .icon {
      position: absolute;
      right: 10px;
      top: 10px;
      color: #ccc;
    }
    &.placeholder::before {
      padding-left: 10px;
      color: #bfbfbf;
      content: "选择部门或用户";
    }
    .item_span {
      background-color: #f2f2f2;
      padding: 0 6px;
      position: relative;
      margin-left: 6px;
      .close {
        position: absolute;
        top: -10px;
        right: -6px;
        line-height: initial;
        width: 10px;
        height: 10px;
        display: block;
        &::after {
          font-style: normal;
          line-height: initial;
          content: "x";
          cursor: pointer;
        }
      }
    }
  }
  .item_input_select {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    width: 394px;
    border: 1px #ccc solid;
    border-radius: 4px;
    padding: 0 4px;
    background-color: #fff;
    z-index: 2;
  }
}
</style>
